<template>
  <div class="">
    <el-button size="small" @click="handleEdit('add', -1, {})"> 新增</el-button>

    <el-table
      :data="filterTableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="projectName" label="项目名称" />
      <el-table-column prop="roomName" label="机房" sortable />
      <el-table-column prop="createTime" label="创建时间" sortable />
      <el-table-column prop="roomCode" label="CODE" sortable />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="组态">
        <template #default="scope">
          <el-button size="small" @click="toSvgEdit(scope.$index, scope.row)">绘制</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #header>
          <el-input v-model="search" size="small" placeholder="请输入名称" />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit('edit', scope.$index, scope.row)">
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="tableData.page"
      v-model:page-size="tableData.size"
      :page-sizes="[10, 20, 50, 200]"
      :size="tableData.size"
      layout="sizes, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <add-program
      :showAddProgram="showAddProgram"
      :pro-type="addType"
      :rowData="rowData"
      @close-add-dialog="closeAddDialog"
    ></add-program>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { ProgramList } from '@/views/demo/program-manage/program-types';
  import AddProgram from './add-program.vue';
  import { getAllData, deleteRoomConfig } from '@/api/project';

  const router = useRouter();
  const search = ref('');
  const addType = ref('add');
  const rowData = ref({});
  const showAddProgram = ref(false);
  let tableData: any = reactive({
    total: 0,
    size: 10,
    page: 1,
    dataList: [
      {
        id: 1,
        projectName: '眉山',
        roomName: '数据机房',
        type: '数据机房',
        projectCode: '001D001',
        roomCode: '001D001',
        // imageAddress: require('./../../../../assets/lyjfbeijintu.png'),
        imageAddress: './../../../../assets/lyjfbeijintu.png',
        roomConfigurationAddress: '001D001',
        remark: 'No. 19, Grove St, Los Angeles'
      },
      {
        id: 2,
        projectName: '眉山',
        roomName: '冷源机房',
        type: '冷源机房',
        roomCode: '001D002',
        remark: 'No. 19, Grove St, Los Angeles'
      },
      {
        id: 3,
        projectName: '眉山',
        roomName: '制冷系统',
        type: '制冷系统',
        roomCode: '001D003',
        remark: 'No. 19, Grove St, Los Angeles'
      },
      {
        id: 4,
        projectName: '2016-05-02',
        roomName: '34ngx',
        roomCode: 'No. 19, Grove St, Los Angeles',
        remark: 'No. 19, Grove St, Los Angeles'
      }
    ]
  });

  const filterTableData = computed(() =>
    tableData.dataList.filter(
      (data) => !search.value || data.roomName.toLowerCase().includes(search.value.toLowerCase())
    )
  );
  const getList = async () => {
    let data = {
      total: tableData.total,
      size: tableData.size,
      page: tableData.page
    };
    const reData: any = await getAllData(data);
    tableData.dataList = reData.data.dataList;
    tableData.total = reData.data.total;
  };

  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    tableData.size = val;
    getList();
  };
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    tableData.page = val;
    getList();
  };
  const toSvgEdit = (index: number, row: ProgramList) => {
    localStorage.setItem('roomRow', JSON.stringify(row));
    router.push({
      name: 'edit-load'
    });
    console.log(index, row);
  };
  const handleEdit = (type: string, index: number, row: any) => {
    addType.value = type;
    showAddProgram.value = true;
    rowData.value = row;
    console.log(index, row);
  };
  const closeAddDialog = () => {
    showAddProgram.value = false;
  };
  const handleDelete = async (index: number, row: ProgramList) => {
    const reData: any = await deleteRoomConfig(row.id);
    console.log(reData);
  };
  onMounted(() => {
    // getList();
  });
</script>
